<template>
  <el-card class="tags-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span class="header-icon">
          <el-icon><PriceTag /></el-icon>
        </span>
        <span class="header-title">标签</span>
        <el-button class="more-button" text @click="router.push('/tags')">
          <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
    </template>

    <div class="tags-cloud">
      <router-link
        v-for="tag in tags"
        :key="tag.name"
        :to="{ name: 'tag-articles', params: { tagId: tag.name }}"
        class="tag-link"
      >
        <el-tag
          :type="tag.type"
          effect="light"
          class="tag-item"
          :class="{ 'is-primary': tag.isPrimary }"
        >
          {{ tag.name }}
        </el-tag>
      </router-link>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { PriceTag, ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const tags = [
  { name: '专栏', type: 'success', isPrimary: true },
  { name: '知识星球', type: 'info', isPrimary: false },
  { name: '项目实战', type: 'danger', isPrimary: true },
  { name: '从 0 到 1', type: 'warning', isPrimary: false },
  { name: '工具', type: '', isPrimary: false },
  { name: 'Python', type: 'success', isPrimary: false },
  { name: 'API 调试', type: 'info', isPrimary: false },
  { name: '脚本', type: 'danger', isPrimary: false },
  { name: '汉化', type: 'warning', isPrimary: false },
  { name: '构建言', type: '', isPrimary: false },
  { name: 'Elasticsearch', type: 'success', isPrimary: false },
  { name: '搜索引擎', type: 'info', isPrimary: false },
  { name: '微服务', type: 'danger', isPrimary: false },
  { name: '多模块工程', type: '', isPrimary: false }
]
</script>

<style scoped>
.tags-card {
  margin-bottom: 24px;
  border-radius: 2px;
  background-color: #fff;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.header-icon {
  margin-right: 8px;
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.45);
}

.header-title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.more-button {
  margin-left: auto;
  color: rgba(0, 0, 0, 0.45);
}

.more-button:hover {
  color: var(--accent-color);
}

.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
}

.tag-link {
  text-decoration: none;
}

.tag-item {
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-color: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.65);
}

.tag-item:hover {
  transform: scale(1.05);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.is-primary {
  font-weight: 500;
  font-size: 14px;
}

:deep(.el-card__header) {
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-card__body) {
  padding: 16px 0 0;
}
</style>
